﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/vue.js"></script>
    <link href="../../../DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />

    <script language="JavaScript" src="../../Comm/JScript.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/QueryString.js"></script>
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script type="text/javascript" src="../../Comm/Gener.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/bootstrap/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/element/element.css" rel="stylesheet" />

    <script src="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/bootstrap/bootstrap-table/src/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>

    <script src="../../Scripts/bootstrap/bootstrap-treeview/src/js/bootstrap-treeview.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/bootstrap-treeview/src/css/bootstrap-treeview.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/element/element.js"></script>
    <style type="text/css">
        .row-margin-top {
            margin-top: 20px;
        }

        .search-margin {
            margin-top: 15px;
        }

        .container-fluid {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #back_btn {
            margin-top: 15px;
            margin-right: auto;
        }

        .el-button--primary {
            padding: 0 15px;
            margin-left: 20px;
            margin-bottom: 15px;
            height: 25px;
            line-height: 25px;
        }

        label {
            margin-bottom: 0;
        }

        .el-tree {
            padding-left: 20px;
        }

        .is-leaf::before {
            display: none;
        }

        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            font-weight: bold;
        }
        .row{
            margin-left:0;
        }
        .el-tag {
            margin: 5px 5px;
        }
        .el-card__header {
            padding: 10px 20px;
        }
        .el-card__body {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="row row-margin-top" style="width: 100%" id="app">
        <el-card style="margin: 0 8px 8px" shadow="hover">
            <div slot="header">
                <span>已选中的部门</span>
            </div>
            <el-tag v-for="tag in tags"
                    :key="tag.id"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag)">
                {{tag.name}}
            </el-tag>
        </el-card>

        <el-tree :props="defaultProps"
                 :load="loadNode"
                 :data="jsonTree"
                 lazy
                 node-key="id"
                 show-checkbox
                 ref="tree"
                 highlight-current
                 :check-strictly="true"
                 @check-change="handleCheckChange">
        </el-tree>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                checkAll: false,
                mapExt: null,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: (data, node) => {
                        if (node.level === 4) {
                            return true
                        }
                    }
                },
                jsonTree: [],
                rootNo: null,
                child: [],
                isBackBtn: '',
                tags: [],
            };
        },
        methods: {
            handleClose(tag) {
                console.log(tag);
                var en = new Entity(GetQueryString("Dot2DotEnName"));
                en[GetQueryString("AttrOfOneInMM")] = GetPKVal();
                en[GetQueryString("AttrOfMInMM")] = tag.id;
                en.Delete(GetQueryString("AttrOfOneInMM"), GetPKVal(), GetQueryString("AttrOfMInMM"), tag.id);
                //取消选中时如果tags数组中有已经选中的数据，再进行点击取消删除时进项删除该项
                var tmp = $.grep(this.tags, function (value) {
                    return value.id != tag.id;
                });
                this.tags = tmp;

                let chooseRes = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
                console.log(chooseRes);
                for (var i = 0; i < chooseRes.length; i++) {
                    if (chooseRes[i] == tag.id) {
                        this.$refs.tree.setChecked(tag.id, false)
                    }
                }
            },
            handleCheckChange(data, checked, z) {
                console.log(data);
                //console.log(r);
                //console.log(z);
                let arr = []
                let res = this.$refs.tree.getCheckedNodes()
                res.forEach((item) => {
                    arr.push(item.id)
                })
                var en = new Entity(GetQueryString("Dot2DotEnName"));
                en[GetQueryString("AttrOfOneInMM")] = GetPKVal();
                en[GetQueryString("AttrOfMInMM")] = data.id;
                en.DeptName = data.name;
                if (checked == true) {
                    //判断数据是否存在，如果存在选中时就不再添加，不存在再添加
                    var flag = false;
                    for (var i in  this.tags) {
                        if (this.tags[i].id == data.id) {  
                            flag = true;  
                        }
                    } 
                    if (flag == false) {
                        this.tags.push({
                            id: data.id,
                            name: data.name,
                        })
                    }

                    //选中
                    en.Save();
                } else {
                    //取消选中时如果tags数组中有已经选中的数据，再进行点击取消删除时进项删除该项
                    var tmp = $.grep(this.tags, function (value) {
                        return value.id != data.id;
                    });
                    this.tags = tmp;
                    //取消选中
                    en.Delete(GetQueryString("AttrOfOneInMM"), GetPKVal(), GetQueryString("AttrOfMInMM"), data.id);
                }
            },
            //判断是否有上一路径;
            IsBack() {
                this.isBackBtn = GetQueryString("BackBtn"),
                    console.log(this.isBackBtn);
                if (document.referrer.includes("EmpDepts.htm")) {
                    window.history.go(-1);
                } else {
                    window.history.go(0);
                }
            },
            //懒加载
            loadNode(node, resolve) {
                if (node.level === 0) {
                    var roootData = [];
                    roootData = this.jsonTree.map(key => {
                        return {
                            name: key.label,
                            id: key.id,
                            children: key.children,
                        }
                    })
                    return resolve(roootData);
                }
                if (node.level > 3) {
                    return resolve([]);
                }
                if (node.level > 0) {
                    var ens = new Entities(GetQueryString("EnsOfM")); //BP.Port.Depts
                    ens.Retrieve("ParentNo", node.data.id, "Idx");
                    this.child = this.creatTreeChildern(ens, node.data.id);
                    var data = [];
                    data = this.child.map(item => {
                        return {
                            name: item.label,
                            id: item.id,
                            children: item.children,
                        }
                    })
                    setTimeout(() => {
                        resolve(data);
                    }, 500);
                }

            },
            createJsonToTree(jsonArray, parentNo) {
                //获取ParentNo的数据
                var items = $.grep(jsonArray, function (obj) {
                    return obj.No == parentNo;
                });
                if (items.length != 0) {
                    this.jsonTree.push({
                        "id": items[0].No,
                        "label": items[0].Name,
                        "children": this.creatTreeChildern(jsonArray, items[0].No),
                        "state": { checked: checked, disabled: false }
                    });
                } else {
                    for (var i = 0; i < jsonArray.length; i++) {
                        var data = jsonArray[i];
                        if (data.ParentNo.trim() == parentNo) {
                            var checked = false;
                            this.jsonTree.push({
                                "id": data.No,
                                "label": data.Name,
                                "children": this.creatTreeChildern(jsonArray, data.No),
                                "state": { checked: checked, disabled: false }
                            });
                        }
                    }
                    this._(this.jsonTree);
                }
            }
            , _(treeArray) {
                $.each(treeArray, function (i, o) {
                    if ($.isArray(o.children)) {
                        if (o.children.length == 0) {
                            o.children = [];
                        } else {
                            this._(o.children);
                        }
                    }
                });
            },
            creatTreeChildern(jsonArray, parentNo) {
                var childList = []
                for (var i = 0; i < jsonArray.length; i++) {
                    var data = jsonArray[i];
                    if (data.ParentNo == parentNo) {
                        var checked = false;
                        this.jsonTree.filter((ID) => {
                            if (ID.id === parentNo) ID.children.push({
                                "id": data.No,
                                "label": data.Name,
                                "children": this.creatTreeChildern(jsonArray, data.No),
                                "state": { checked: checked, disabled: false }
                            })
                        })
                        childList.push({
                            "id": data.No,
                            "label": data.Name,
                            "children": this.creatTreeChildern(jsonArray, data.No),
                            "state": { checked: checked, disabled: false }
                        });
                    }
                }

                return childList;
            },
            //获取父节点数据
            loadTree() {
                var webUser = new WebUser()
                //global
                let global = window;
                global.selectedNodes = [];
                global.selectedRows = [];
                this.rootNo = GetQueryString("RootNo");
                if (this.rootNo == "@WebUser.FK_Dept")
                    this.rootNo = webUser.FK_Dept;
                if (webUser.CCBPMRunModel == 2)
                    this.rootNo = webUser.OrgNo;
                if (this.rootNo == null || this.rootNo == "")
                    this.rootNo = webUser.FK_Dept;
                let ens = new Entities(GetQueryString("EnsOfM")); //BP.Port.Depts
                ens.Retrieve("ParentNo", this.rootNo, "Idx");                   
                this.createJsonToTree(ens, this.rootNo);
                if (ens.length == 0) {
                    let ParentNo = 'OrgNo';
                    ens.Retrieve(ParentNo, this.rootNo, "Idx");
                    this.createJsonToTree(ens, this.rootNo);
                }
                //查询选中的部门
                ens = new Entities(GetQueryString("Dot2DotEnName") + "s");
                ens.Retrieve(GetQueryString("AttrOfOneInMM"), GetPKVal());

                for (var i = 0; i < ens.length; i++) {
                    var en = ens[i];
                    this.tags.push({
                        id: en.FK_Dept,
                        name: en.FK_DeptText,
                    })

                }
                console.log(this.tags);
            },
        },
        created() {
            this.loadTree();
        },
    })
</script>
</html>
